<template>
    <div class="flex py-1 items-center space-x-5">
        <div class="min-w-36 text-right text-sm text-slate-500" v-if="col.alias">{{ col.alias }}</div>
        <div class="flex-1" v-if="componentId">

            <template v-if="col.formitem=='input'">
                <component :is="componentId" v-model="colval">
                    <template v-slot:prefix>
                        <span class="text-xs text-slate-500">
                            {{ col.prefix }}
                        </span>
                        
                    </template>
                    <template v-slot:suffix>
                        <span class="text-xs text-slate-500">
                            {{ col.suffix }}
                        </span>
                        
                    </template>
                </component>
            </template>

            <template v-else>
                <component :is="componentId" v-model="colval" maxlength="50"></component>
            </template>

        </div>
    </div>
</template>
<script setup>
import { ref, watch, onMounted, shallowRef } from 'vue'
import Tree from "./tree.vue"
import Dselect from "./dselect.vue"
import Linkage from "./linkage.vue"
const props = defineProps({
    modelValue: {
        default: ''
    },
    col: {
        type: Object
    }
})
const emit = defineEmits(['update:modelValue'])
const isload = ref(false)
const colval = ref(props.modelValue)
const componentId = shallowRef('')
watch(colval, (n) => {
    emit('update:modelValue', n)
})
onMounted(() => {
    let formitem = props.col.formitem
    switch (formitem) {
        case 'tree':
            componentId.value = Tree
            break;
        case 'select':
            componentId.value = Dselect
            break;
        case 'linkage':
            componentId.value = Linkage
            break;
        default:
            componentId.value = 'yp' + formitem
    }
    isload.value = true
})
</script>
